<template>
  <div>
    <t-navbar title="测试列表" :fixed="false" />

    <div>
      <t-dropdown-menu>
        <t-dropdown-item :options="product.options" :value="product.value" @change="change" />
        <t-dropdown-item :options="sorter.options" :value="sorter.value" />
      </t-dropdown-menu>
    </div>
    <div>
      <div style="margin-top: 10px;border-radius: 20px;border: 1px solid gold;padding: 15px" v-for="e in exams" :key="e.id">
        <div>
          <span>{{e.title}}</span>
          <span style="margin-left: 20px;color: red">{{e.type}}</span>
        </div>
        <div style="margin-top: 5px">
          状态：{{e.status}}
        </div>
        <div style="font-size: 12px;color: grey">创建测试时间：{{e.createTime}}</div>
        <div v-if="e.status=='已结束'" style="margin-top: 10px">
          <t-divider content="人格测试结果显示" />
          <div>测试人格：{{e.occupation}}</div>
          <div>人格品性：{{e.characteristic}}</div>
          <div style="font-size: 12px;color: grey">{{e.summarize}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {get,post} from "../util/Request.js";

const product = {
  value: 'all',
  options: [
    {
      value: 'all',
      label: '全部测试',
    },
    {
      value: 'new',
      label: '最新测试',
    }
  ],
};
const sorter = {
  value: 'default',
  options: [
    {
      value: 'default',
      label: '默认排序',
    },
    {
      value: 'price',
      label: '状态排序',
    },
  ],
};

const exams=ref([])

onMounted(()=>{
  loadData()
})

const loadData=()=>{
  //请求接口 查询我的测试记录
  get("exam/myexams").then(r=>{
    exams.value=r.data
  })
}

const change=(e)=> {
  console.log(e);
  loadData()
}
</script>

<style scoped>

</style>